<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="rootPath" value="${pageContext.request.contextPath}" scope="page" ></c:set>
<%--<!DOCTYPE html>--%>
<html lang="en">
<head>
<%--    <meta charset="UTF-8">--%>
    <title>注  册</title>
<%--    <script type="text/javascript" src="${rootPath}/backend/detail/style/js/jquery.js" ></script>--%>
    <script type="text/javascript" src="${rootPath}/backend/detail/style/js/jquery1.11.1.js" ></script>
    <script type="text/javascript" src="${rootPath}/backend/detail/style/js/validate.js"></script>

    <script type="application/javascript">
        $(function(){
            $("#reForm").validate({
                //验证规则
                rules:{
                    username:{
                        required:true,
                        rangelength:[4,20]
                    },
                    password: {
                        required:true,
                        rangelength:[5,32]
                    },
                    nickName: {
                        maxlength:20,
                    },
                    phone : {
                        minlength:11,
                        isMobile:true
                    },
                    email : {
                        email:true
                    }
                },
                //验证失败的提示信息
                messages:{
                    username:{
                        required:"用户名不能为空",
                        rangelength:"用户名长度在4-20之间"
                    },
                    password:{
                        required:"密码不能为空",
                        rangelength:"密码长度在4-20之间"
                    },
                    nickName: {
                        maxlength:"昵称长度不能大于20"
                    },
                    phone:{
                        minlength : "不能小于11个字符"
                    },
                    email:{
                        email:"必须输入正确格式的电子邮件"
                    },
                }
            })
            jQuery.validator.addMethod("isMobile", function(value, element) {
                var length = value.length;
                var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
                return this.optional(element) || (length == 11 && mobile.test(value));
            }, "请填写正确的手机号码")
        })
    </script>

</head>
<body>
    <div style="width:450px;margin:50px auto;border:3px solid black;padding:30px;text-align: center">
        <h3>注  册</h3>
<%--        <form action="#" method="post" id="reForm" >--%>
        <form action="${rootPath}/userService/register" method="post" id="reForm" >
            <fieldset>
            <p>用户名：<input type="text" name="username" value="" /></p>
            <p>密码：<input type="password" name="password" value="" /></p>
            <p>昵称：<input type="text" name="nickName" value=""/></p>
            <p>性别：
                <select name="gender" style="width:180px">
                    <option value="1" selected>男</option>
                    <option value="0">女</option>
                </select>
            </p>
            <p>手机：<input type="text"  name="phone" maxlength="11" minlength="11" /></p>
            <p>邮箱：<input type="email"  name="email"  /></p>
            <p>是否为VIP用户：
                <select name="isVip" style="width:180px">
                    <option value="1">是</option>
                    <option value="0" selected>否</option>
                </select>
            </p>
            <p>是否为管理员：
                <select name="isAdmin" style="width:180px">
                    <option value="1" selected>是</option>
                    <option value="0">否</option>
                </select>
            </p>
            <%--<p><input type="button" onclick="req()" value="提交" /></p>--%>
            <p><input type="submit"  value="提交" />
            </fieldset>
        </form>
        <a href="login.jsp"><button>去登录</button></a>
    </div>
<script type="application/javascript">
    function req(){
        console.log($("#reForm").serialize());
        $.ajax({
            type:"post",
            url:"${rootPath}/userService/register",
            data:$("#reForm").serialize(),
            dataType:'json',
            success:function(data){
                if(data!=null){
                    alert(data.message);
                    if(data.success){
                        window.location.href = "${rootPath}/login.jsp";
                    }
                }
            }
        })


    }
</script>
</body>
</html>